<template>
    <div class="fill">
        <el-container class="fill">
            <el-header height="180px">
                <el-col>
                    <el-row class="c-title">
                        当前终端设备 CPU 监控信息
                    </el-row>
                    <el-row class="c-warn" style="margin-top: 10px">
                        *仅在设备运行时才会记录，重启/恢复出厂设置之后会清空已记录的 CPU 信息*
                    </el-row>
                    <el-row class="c-warn" style="margin-top: 5px">
                        *当前显示的 CPU 使用率比实际 CPU 使用率偏高 3 ~ 5 %*
                    </el-row>
                    <el-row style="margin-top: 30px" type="flex" justify="start" align="center">
                        <el-col>
                            <el-radio-group v-model="mode" style="margin-bottom: 30px;" @change="modeChanged">
                                <el-radio-button :label="0">实时CPU信息</el-radio-button>
                                <el-radio-button :label="1">按分钟统计</el-radio-button>
                                <el-radio-button :label="2">按小时统计</el-radio-button>
                                <el-radio-button :label="3">按天统计</el-radio-button>
                            </el-radio-group>
                        </el-col>
                        <el-col :span="16"></el-col>
                        <el-col>
                            <el-button type="primary" @click="refreshCpuInfo">刷新</el-button>
                        </el-col>
                    </el-row>
                </el-col>
            </el-header>
            <el-main class="fill">
                <div key="0" v-if="requestStatus === 0" class="c-center">
                    <loading class="c-center"></loading>
                </div>
                <div key="1" v-else-if="requestStatus === 1" class="c-center">
                    <animate-border style="color: #e34981; font-weight: bold">加载数据失败，请刷新重试</animate-border>
                </div>
                <div key="2" class="fill" v-else>
                    <div key="3" class="fill" v-if="mode === 0">
                        <el-container class="fill">
                            <el-header height="30px">
                                <div class="c-title">User: {{infoData.user}}%, System: {{infoData.system}}%, 空闲: {{infoData.idle}}%</div>
                            </el-header>
                            <el-main class="fill">
                                <v-chart :options="chartData" autoresize theme="light" class="c-center"></v-chart>
                            </el-main>
                            <el-footer height="30px">
                                <div class="c-warn">频繁刷新可能会导致设备 CPU 使用率增高</div>
                            </el-footer>
                        </el-container>
                    </div>
                    <div key="4" class="fill" v-if="mode === 1">
                        <el-container class="fill">
                            <el-header height="30px">
                                <div class="c-title">最新一次数据刷新时间: {{infoData.timestamp | dateformat('YYYY-MM-DD HH:mm:ss')}}</div>
                            </el-header>
                            <el-main class="fill">
                                <v-chart :options="chartData" autoresize theme="light" class="c-center"></v-chart>
                            </el-main>
                        </el-container>
                    </div>
                    <div key="5" class="fill" v-if="mode === 2">
                        <el-container class="fill">
                            <el-header height="30px">
                                <div class="c-title">最新一次数据刷新时间: {{infoData.timestamp | dateformat('YYYY-MM-DD HH:mm:ss')}}</div>
                            </el-header>
                            <el-main class="fill">
                                <v-chart :options="chartData" autoresize theme="light" class="c-center"></v-chart>
                            </el-main>
                            <el-footer height="30px">
                                <div class="c-title">数据取每分钟均值</div>
                            </el-footer>
                        </el-container>
                    </div>
                    <div key="6" class="fill" v-if="mode === 3">
                        <el-container class="fill">
                            <el-header height="30px">
                                <div class="c-title">最新一次数据刷新时间: {{infoData.timestamp | dateformat('YYYY-MM-DD HH:mm:ss')}}</div>
                            </el-header>
                            <el-main class="fill">
                                <v-chart :options="chartData" autoresize theme="light" class="c-center"></v-chart>
                            </el-main>
                            <el-footer height="30px">
                                <div class="c-title">数据取每分钟均值</div>
                            </el-footer>
                        </el-container>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "CpuMonitor",
        data() {
            return {
                // CPU 信息显示模式
                mode: 0,
                // 请求状态
                // 0 - 请求中
                // 1 - 请求失败
                // 2 - 请求成功
                requestStatus: 0,

                // 原始数据
                infoData: null,
                // 图数据
                chartData: null,
            };
        },
        mounted() {
            this.refreshCpuInfo();
        },
        methods: {
            modeChanged() {
                this.refreshCpuInfo()
            },
            refreshCpuInfo() {
                const vue = this;
                vue.requestStatus = 0;
                this.$request.request({
                    tag: 'request',
                    wrapper: this.$request.getCpuInfo({
                        mode: vue.mode
                    })
                }).result({
                    success: result => {
                        vue.infoData = result;
                        const timeRows = [];
                        const userRows = [];
                        const systemRows = [];
                        const idleRows = [];
                        switch (vue.mode) {
                            case 0:
                                vue.chartData = {
                                    columns: ['cpu', 'percent'],
                                    rows: [
                                        {'cpu': 'user', 'percent': result.user},
                                        {'cpu': 'system', 'percent': result.system},
                                        {'cpu': '空闲', 'percent': result.idle},
                                    ]
                                };

                                vue.chartData = vue.$echatGen.getPieOptions({
                                    name: 'CPU信息',
                                    data:[
                                        {value:result.user, name:'user'},
                                        {value:result.system, name:'system'},
                                        {value:result.idle, name:'空闲'},
                                    ],
                                    toolTipFmt: params => {
                                        return params.marker + params.data.name + ": (" + params.percent + "%)";
                                    }
                                });
                                break;
                            case 1:
                                result.list.reverse().forEach(item => {
                                    timeRows.push(this.$moment(item.timestamp).format("HH:mm"));
                                    userRows.push(item.user);
                                    systemRows.push(item.system);
                                    idleRows.push(item.idle);
                                });
                                vue.chartData = vue.$echatGen.getLineOptions({
                                    xAxis: {
                                        name: '日期',
                                        type: 'category',
                                        data: timeRows,
                                    },
                                    yAxis: {
                                        type: 'value',
                                        name: '占用率',
                                        axisLabel:{color:'rgb(255,255,255)'},
                                    },
                                   dataArr: [
                                       {
                                           name: "user",
                                           data: userRows
                                       },
                                       {
                                           name: "system",
                                           data: systemRows
                                       },
                                       {
                                           name: "idle",
                                           data: idleRows
                                       },
                                   ],
                                   toolTipFmt: params => {
                                        let str = params[0].name;
                                       params.forEach(item => {
                                           str += '<br/>';
                                           str += item.marker;
                                           str += item.seriesName + ": (" + item.data + "%)";
                                       });
                                       return str;
                                   }
                                });
                                break;
                            case 2:
                                result.list.reverse().forEach(item => {
                                    timeRows.push(this.$moment(item.timestamp).format("YYYY-MM-DD HH点"));
                                    userRows.push(item.user);
                                    systemRows.push(item.system);
                                    idleRows.push(item.idle);
                                });
                                vue.chartData = vue.$echatGen.getLineOptions({
                                    xAxis: {
                                        name: '日期',
                                        type: 'category',
                                        data: timeRows,
                                    },
                                    yAxis: {
                                        type: 'value',
                                        name: '占用率',
                                        axisLabel:{color:'rgb(255,255,255)'},
                                    },
                                    dataArr: [
                                        {
                                            name: "user",
                                            data: userRows
                                        },
                                        {
                                            name: "system",
                                            data: systemRows
                                        },
                                        {
                                            name: "idle",
                                            data: idleRows
                                        },
                                    ],
                                    toolTipFmt: params => {
                                        let str = params[0].name;
                                        params.forEach(item => {
                                            str += '<br/>';
                                            str += item.marker;
                                            str += item.seriesName + ": (" + item.data + "%)";
                                        });
                                        return str;

                                    }
                                });
                                break;
                            case 3:
                                result.list.reverse().forEach(item => {
                                    timeRows.push(this.$moment(item.timestamp).format("YYYY-MM-DD"));
                                    userRows.push(item.user);
                                    systemRows.push(item.system);
                                    idleRows.push(item.idle);
                                });
                                vue.chartData = vue.$echatGen.getLineOptions({
                                    xAxis: {
                                        name: '日期',
                                        type: 'category',
                                        data: timeRows,
                                    },
                                    yAxis: {
                                        type: 'value',
                                        name: '占用率',
                                        axisLabel:{color:'rgb(255,255,255)'},
                                    },
                                    dataArr: [
                                        {
                                            name: "user",
                                            data: userRows
                                        },
                                        {
                                            name: "system",
                                            data: systemRows
                                        },
                                        {
                                            name: "idle",
                                            data: idleRows
                                        },
                                    ],
                                    toolTipFmt: params => {
                                        let str = params[0].name;
                                        params.forEach(item => {
                                            str += '<br/>';
                                            str += item.marker;
                                            str += item.seriesName + ": (" + item.data + "%)";
                                        });
                                        return str;
                                    }
                                });
                                break;
                        }
                        vue.requestStatus = 2;
                    },
                    failure: msg => {
                        vue.requestStatus = 1;
                        this.$message.error(msg);
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>